<template>
  <view class="viewport">
    <fui-nav-bar
      isOccupy
      isFixed
      background="#0052D9"
      title="报修详情"
      color="#fff"
      @leftClick="leftClick"
    >
      <fui-icon color="#fff" name="arrowleft"></fui-icon>
    </fui-nav-bar>

    <view class="warp">
      <!-- <view class="nav">
        <view class="port">
          <view class="title">
            <fui-section :padding="['0', '20rpx']" title="报修信息" fontWeight="500" descrSize="25" color="#666" lineWidth="4px" isLine></fui-section>
          </view>
          <view class="li">
            <view class="left">报修单号</view>
            <view class="right">BX-20224648</view>
          </view>
          <view class="li">
            <view class="left">报修主题</view>
            <view class="right">设备--4564787</view>
          </view>
          <view class="li">
            <view class="left">报修人</view>
            <view class="right">adin</view>
          </view>
          <view class="li">
            <view class="left">所属部门</view>
            <view class="right">生产部一</view>
          </view>
          <view class="li">
            <view class="left">联系方式</view>
            <view class="right">13526263535</view>
          </view>
        </view>
      </view> -->

      <view class="" v-if="orderDetail && orderDetail.status === 1">
        <fui-tabs
          @change="change"
          :tabs="tabs"
          isDot
          scroll
          alignLeft
          :short="false"
        ></fui-tabs>
      </view>
      <view class="scroll-view" v-if="orderDetail && orderDetail.status === 1">
        <faultMessage v-if="checkIndex === 0"></faultMessage>
        <service v-else-if="checkIndex === 1"></service>

        <workload v-else-if="checkIndex === 2"></workload>
        <basic v-else-if="checkIndex === 3"></basic>
        <auditCheck v-else-if="checkIndex === 4"></auditCheck>
        <check v-else-if="checkIndex === 5"></check>
        <!-- <service v-else-if="checkIndex === 3"></service> -->
      </view>
      <view v-else class="no-data">
        <text>暂无数据</text>
      </view>
    </view>
    <view class="footer" v-if="orderDetail && orderDetail.status === 1">
      <view class="recall">确认派工</view>
    </view>
  </view>
</template>

<script setup>
// import information from './components/information.vue';
import faultMessage from "./components/faultMessage.vue";
import auditCheck from "./components/auditCheck.vue";
import service from "./components/service.vue";
import basic from "./components/basic.vue";
import workload from "./components/workload.vue";
import check from "./components/check.vue";
import { onLoad } from "@dcloudio/uni-app";
import { ref, onMounted } from "vue";
import { getRepairOrderDetail } from "@/pages/api/subpkg_institution/repairworkorder.js";

const leftClick = () => {
  uni.navigateBack();
};

const orderDetail = ref(null);
let query = {};

onLoad((_query) => {
  query = _query;
});

// 获取工单详情
const getOrderDetail = async () => {
  try {
    const res = await getRepairOrderDetail(query.id);
    if (res.code === 200) {
      orderDetail.value = res.data;
    } else {
      uni.showToast({
        title: res.msg || "获取详情失败",
        icon: "none",
      });
    }
  } catch (error) {
    uni.showToast({
      title: "获取详情失败",
      icon: "none",
    });
  }
};

onMounted(() => {
  console.log(
    "%c [ 4564645 ]: ",
    "color: #bf2c9f; background: pink; font-size: 13px;",
    "4564645"
  );
  getOrderDetail();
});

const tabs = ref([
  {
    //标签显示文本（String）
    name: "维修信息",
  },
  {
    name: "报修信息",
  },
  {
    name: "工作量",
  },
  {
    name: "更换备件",
  },
  {
    name: "执行进度",
  },
  {
    name: "验收信息",
  },
]);

const checkIndex = ref(0);
const change = (e) => {
  console.log(e);
  checkIndex.value = e.index;
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  overflow: hidden;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.colorGray {
  color: #cbb8b8 !important;
}

.port {
  .title {
    border-bottom: 1px solid #ccc;
    height: 70rpx;
    display: flex;
    align-items: center;
  }
  .li {
    padding: 20rpx;
    display: flex;
    align-items: center;
    height: 100rpx;
    // padding-left: 40rpx;
    .right {
      margin-left: 30rpx;
      color: #cbb8b8;
    }
  }
  .item {
    // height: 100rpx;
    padding-left: 40rpx;
    padding-bottom: 30rpx;
    .left {
      height: 70rpx;
    }
    .described {
      padding-right: 50rpx;
    }
  }
}
.warp {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .nav {
    background-color: #fff;
    .top {
      display: flex;

      .img {
        width: 180rpx;
        height: 190rpx;
      }
      .nav_title {
        // padding: 20rpx;
        padding-left: 20rpx;
        .h1 {
          font-size: 30rpx;
          font-weight: 600;
          line-height: 60rpx;
          height: 60rpx;
        }
        .h2 {
          line-height: 44rpx;
        }
      }
    }
    .nav_bottom {
      margin-top: 10rpx;
      .nav_warp {
        padding: 10rpx;
        height: 50rpx;
        display: flex;
        align-items: center;
      }
    }
  }
  .scroll-view {
    flex: 1;
    // background-color: pink;
    overflow: hidden;
    padding-bottom: 170rpx;
  }
}
.footer {
  // position: fixed;
  // top: 50;
  // button: 20;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  z-index: 5;
  border-top: 1px solid #ccc;
  height: 150rpx;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .recall {
    background-color: #0052d9;
    width: 90%;
    border: 1px solid #0052d9;
    border-radius: 5rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #fff;
  }
}
.no-data {
  text-align: center;
  padding: 40rpx;
  color: #999;
}
</style>
